<template>
  <div>
    <mavon-editor :style="{'height': clientHeight+'px'}" :toolbars="toolbars" :subfield="false" defaultOpen="preview" navigation :editable='editable' :value="doc" @subfieldToggle="editMd" @save="save" />
  </div>
</template>

<script>
export default {
  name: "mdedit",
  data: function() {
    return { 
      docTemp: ""
    };
  },
  computed: {
    toolbars() {
      if (this.editable) {
        return {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true // 预览
        };
      }else{
        return{
          navigation: true
        }
      }
    },
    editable() {
      return this.$store.state.catalog.power != "r";
    },
    doc() {
      return this.$store.state.mdedit.doc;
    },
    clientHeight() {
      return (
        Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
        ) - 100
      );
    }
  },
  methods: {
    editMd() {},
    save(value, render) {
      console.log(value);
      console.log(render);
      this.$store.dispatch("updateDocument", value);
    }
  }
};
</script>

<style scoped>
</style>
